<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rule" label-width="120px">
      <el-form-item label="分类" prop="classifyId">
        <el-select @change="classifyChange" v-model="form.classifyId" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in classifyList" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="礼包" prop="giftId" v-show="form.classifyId == 1"  style="width: 100%">
        <el-select v-model="form.giftId" placeholder="请选择">
          <el-option v-for="item in giftPackList" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="form.goodsName" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
      </el-form-item>
      <el-form-item label="已出售量" prop="salesVolume">
        <el-input v-model="form.salesVolume" placeholder="请输入已出售量"></el-input>
      </el-form-item>
      <el-form-item label="重量" prop="weight ">
        <el-input v-model="form.weight" placeholder="请输入重量"></el-input>
      </el-form-item>
      <el-form-item label="商品库存" prop="stock">
        <el-input v-model="form.stock" placeholder="请输入商品库存"></el-input>
      </el-form-item>
      <el-form-item label="商品缩略图" prop="shoppingGoodsImageList">
        <ImageUpload ref="imageUpload"/>
      </el-form-item>
      <el-form-item label="商品视频" prop="video">
        <div style="position: relative">
          <VideoUpload ref="videoUpload" />
          <div style="position: absolute;top: 0;left: 100px">
            <el-checkbox v-model="form.videoShowing" style="margin: 0">显示/隐藏</el-checkbox>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="商品售价" prop="goodsPrice">
        <el-input v-model="form.goodsPrice" placeholder="请输入商品售价"></el-input>
      </el-form-item>
      <el-form-item label="原价" prop="originalPrice">
        <el-input v-model="form.originalPrice" placeholder="请输入原价"></el-input>
      </el-form-item>
      <el-form-item label="商品详情" prop="goodsDetails">
        <Editor ref="editor" :height="400"></Editor>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </div>
</template>
<script>
import Editor from "@/components/Editor/index.vue";
import {addGoods, getGoods, updateGoods} from "@/api/system/goods";
import {listClassify} from "@/api/system/classify";
import {listRole} from "@/api/system/distribution";
import ImageUpload from "@/components/ImageUpload/index.vue";
import VideoUpload from "@/components/VideoUpload/index.vue";
export default {
  name: "",
  components: {
    Editor,ImageUpload,VideoUpload
  },
  data() {
    return {
      uploadVideoUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      classifyList: [],
      giftPackList: [],
      form: {
        classifyId: '',
        giftId: '',
        goodsName: '',
        unit: '',
        salesVolume: '',
        weight: '',
        stock: '',
        shoppingGoodsImageList: [],
        video: "",
        videoShowing: false,
        goodsPrice: '',
        originalPrice: '',
        goodsDetails: ''
      },
      rule: {
        classifyId: [
          {required: true, message: "请选择分类", trigger: "blur"},
        ],
        giftId: [],
        goodsName: [
          {required: true, message: "请输入商品名称", trigger: "blur"},
        ],
        unit: [
          {required: true, message: "请输入单位", trigger: "blur"},
        ],
        salesVolume: [
          {required: true, message: "请输入销售量", trigger: "blur"},
        ],
        weight: [
          {required: true, message: "请输入重量", trigger: "blur"},
        ],
        stock: [
          {required: true, message: "请输入库存", trigger: "blur"},
        ],
        shoppingGoodsImageList: [
          {required: true, message: "请上传缩略图", trigger: "blur"},
        ],
        goodsPrice: [
          {required: true, message: "请输入价格", trigger: "blur"},
        ],
        originalPrice: [
          {required: true, message: "请输入原价", trigger: "blur"},
        ],
        goodsDetails: [
          {required: true, message: "请输入详情", trigger: "blur"},
        ],
      },
    };
  },
  created() {
    listClassify().then(res=>{
      this.classifyList = res.rows.map(item=>{
        return{
          name: item.classificationName,
          value: item.id,
        }
      });
    })
    listRole().then(res=>{
      this.giftPackList = res.rows.map(item=>{
        return{
          name: item.roleName,
          value: item.id,
        }
      });
    })
  },
  mounted() {
    let id = this.$route.params.id;
    if(id){
      getGoods(id).then(res=>{
        this.form.classifyId = res.data.classifyId;
        this.form.giftId = res.data.giftId;
        this.form.weight = res.data.weight;
        this.form.goodsName = res.data.goodsName;
        this.form.unit = res.data.unit;
        this.form.salesVolume = res.data.salesVolume;
        this.form.stock = res.data.stock
        this.form.originalPrice = res.data.originalPrice
        this.form.goodsPrice = res.data.goodsPrice
        this.form.video = res.data.video
        this.form.videoShowing = res.data.videoShowing == 1 ? true : false;
        let replaceText = `src="ShoppingMall`
        let goodsDetails = res.data.goodsDetails.replace(new RegExp(replaceText,"g"), `src="${process.env.VUE_APP_BASE_API}`)
        this.form.goodsDetails= goodsDetails
        res.data.shoppingGoodsImageList.forEach(item=>{
          item.goodsImage = process.env.VUE_APP_BASE_API + item.goodsImage;
        })
        this.form.shoppingGoodsImageList = res.data.shoppingGoodsImageList
        console.log(this.form)
        this.form.id = res.data.id
        this.$refs.imageUpload.fileList = this.form.shoppingGoodsImageList.map(item=>{
          return {
            url:item.goodsImage
          }
        })

        let videoNameArr = this.form.video.split('/');
        let videoName = videoNameArr[videoNameArr.length - 1];

        this.$refs.videoUpload.fileList = [
          {
            url: process.env.VUE_APP_BASE_API +  this.form.video,
            name:videoName
          }
        ];
        this.$refs.editor.Quill.root.innerHTML = this.form.goodsDetails
      })
    }
  },
  methods: {
    classifyChange(e){
      if(e == 1){
        this.rule.giftId =[
          {required: true, message: "请选择礼品包装", trigger: "blur"},
        ]
      }else{
        this.rule.giftId = []
      }
    },
    submit() {
      let imageBaseUrl = process.env.VUE_APP_BASE_API
      this.form.shoppingGoodsImageList = this.$refs.imageUpload.fileList.map((item,index)=>{
        let goodsImage = item.name || item.url;
        goodsImage = goodsImage.replace(new RegExp(imageBaseUrl,"g"), '')
        return{
          goodsImage: goodsImage,
          sort:index+1
        }
      })
      this.form.video = this.$refs.videoUpload.fileList[0]?.name || ''
      let goodsDetails = this.$refs.editor.Quill?.root?.innerHTML || ''
      goodsDetails = goodsDetails.replace(new RegExp(imageBaseUrl,"g"), `ShoppingMall`)
      this.form.goodsDetails = goodsDetails
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, this.form);
          data.videoShowing = data.videoShowing ? 1 : 0;
          if(data.id){
            updateGoods(data).then(res=>{
              this.$message.success('操作成功')
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.go(-1)
            })
          }else{
            addGoods(data).then(res=>{
              this.$message.success('操作成功')
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.go(-1)
            })
          }
        } else {
          return false;
        }
      });
    },
    cancel() {
      console.log(123)
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  }
}
</script>
<style lang="scss">

</style>
